<template>
	<view class="container">
		<view class="money-transfer-wrapper flex justify-between align-center">
			<text class="label">预计可转出资产</text>
			<text class="money-transfer-value">{{info.safe_chi}}元</text>
		</view>
		<view class="transfer-form-wrapper">
			<view class="title-wrapper flex align-center">
				<text class="title">转出资产比例（%）</text>
				<view class="info-icon"></view>
			</view>
			<view class="transfer-input-wrapper flex align-end">
				<text class="unit">￥</text>
				<u-input class="input" v-model="value" type="digit" />
			</view>
			<view class="transfer-list flex justify-between">
				<text class="transfer-item" v-for="(item,index) in transferList"
					:class="transferIndex==index?'transfer-item-active':''" @tap="select(index)">
					{{item}}
				</text>
			</view>
			<view class="tip">
				转出金额受到组合内净值变化影响，并会扣除2%的投顾服务费，以实际到账为准
			</view>
		</view>
		<view class="common-btn submit-btn" @tap="submit">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				value: "",
				transferList: ["10%", "15%", "20%", "25%", "全部"],
				transferIndex: -1
			};
		},
		methods: {
			select(index) {
				if (this.transferIndex == index) {
					return false
				}
				this.transferIndex = index
				switch (this.transferList[this.transferIndex]) {
					case "10%":
						this.value =(parseFloat(this.info.safe_chi) * 0.1).toFixed(2)
						break
					case "15%":
						this.value = (parseFloat(this.info.safe_chi) * 0.15).toFixed(2)
						break
					case "20%":
						this.value =(parseFloat(this.info.safe_chi) * 0.2).toFixed(2)
						break
					case "25%":
						this.value = (parseFloat(this.info.safe_chi) * 0.25).toFixed(2)
						break
					case "全部":
						this.value = parseFloat(this.info.safe_chi)
						break
				}
			},
			async submit(){
				if(!this.value){
					uni.showToast({
						icon:"none",
						title:"请输入金额"
					})
					return
				}
				try{
					await this.$u.api.transferOutApi({num:this.value,id:this.info.list[0].id})
					uni.showToast({
						icon:"success",
						title:"转出成功"
					})
				}catch(e){
					//TODO handle the exception
				}
				
			}
		},
		async onLoad() {
			try {
				this.info = await this.$u.api.getOnWorryInfoApi()
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 20rpx;

		.money-transfer-wrapper {
			padding: 0 30rpx;
			height: 96rpx;
			background: #FFFFFF;

			.label {
				font-size: 30rpx;
				color: #333333;
			}

			.money-transfer-value {
				font-size: 30rpx;
				color: #333333;
			}
		}

		.transfer-form-wrapper {
			margin-top: 20rpx;
			padding: 30rpx;
			background-color: #fff;

			.title-wrapper {
				.title {
					font-size: 30rpx;
					color: #333333;
				}

				.info-icon {
					width: 32rpx;
					height: 32rpx;
					background: url("~@/static/images/moneyTransfer/info-icon.png");
					background-size: 100% 100%;
				}
			}

			.transfer-input-wrapper {
				padding: 30rpx 0 18rpx 0;
				border-bottom: 2rpx solid #F0F8FF;

				.unit {
					margin-right: 10rpx;
					font-size: 26rpx;
					color: #333333;
					line-height: 70rpx;
				}

				.input {
					flex: 1;
					font-size: 50rpx;
					font-weight: 500;
					color: #333333;
				}

				.close-icon {
					width: 48rpx;
					height: 48rpx;
					background: url("~@/static/images/moneyTransfer/close-icon.png");
					background-size: 100% 100%;
				}
			}
		}

		.transfer-list {
			margin-top: 20rpx;

			.transfer-item {
				width: 100rpx;
				height: 54rpx;
				background: #F5F5F5;
				border-radius: 4rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 54rpx;
				text-align: center;
			}

			.transfer-item-active {
				background: #E7F1FF;
				color: $color-blue;
			}
		}

		.tip {
			font-size: 26rpx;
			margin-top: 20rpx;
			color: #999999;
		}

		.submit-btn {
			margin: 60rpx 30rpx;
		}
	}
</style>
